Merged
Conversation
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR implements the use of lightningcss to process CSS across various build configurations and streamlines the TSUP configurations.
- Introduces the lightningCssPlugin in tsup.base.config.ts and adds its dependency in package.json.
- Removes the custom CSS loader configuration in several tsup.config.ts files in favor of the css plugin.
- Adjusts the plugin order and disables legacy plugins for consistency.
Reviewed Changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| tsup.base.config.ts | Adds lightningcss plugin, introduces disablePlugin helper, and updates ESBuild plugin arrays. |
| packages/fluent-theme/tsup.config.ts | Removes custom CSS loader in favor of esbuildPlugins and standardizes configuration. |
| packages/fluent-theme/src/components/theme/Theme.module.css | Removes the :global block to simplify and reduce global CSS rules. |
| packages/component/tsup.config.ts | Removes the CSS loader override to rely solely on esbuildPlugins for processing. |
| packages/bundle/tsup.config.ts | Simplifies esbuildPlugins configuration by removing unnecessary spread of base plugins. |
| package.json | Adds the unplugin-lightningcss dependency for CSS processing. |
Comments suppressed due to low confidence (6)
packages/component/tsup.config.ts:17
- Consider adding documentation or comments explaining the removal of the custom CSS loader override to clarify that CSS processing is now exclusively handled by the esbuildPlugins.
],
packages/fluent-theme/src/components/theme/Theme.module.css:1
- [nitpick] Verify that the removal of the previous :global block containing unused global class selectors is intentional and that all required global styles remain applied.
:global(.webchat-fluent).theme {
tsup.base.config.ts:17
- Confirm that disabling the plugin by overriding its setup function with an immediately resolved promise is the intended behavior and does not suppress any necessary initialization.
plugin.setup = () => Promise.resolve();
tsup.base.config.ts:85
- [nitpick] Ensure that the ordering of 'cssPlugin' in the ESBuild plugins array is correct and does not inadvertently interfere with other plugins' processing steps.
cssPlugin
packages/fluent-theme/tsup.config.ts:42
- Review the removal of the '.css': 'local-css' loader configuration to ensure that the lightningcss plugin handles all necessary CSS transformations as expected.
esbuildPlugins: [
packages/bundle/tsup.config.ts:41
- Confirm that removing the spread of baseConfig.esbuildPlugins in favor of a single plugin is intentional and does not lead to the omission of other necessary plugin functionalities.
esbuildPlugins: [resolveCognitiveServicesToES2015],
OEvgeny
requested review from
a-b-r-o-w-n,
beyackle2,
compulim,
cwhitten,
srinaath and
tdurnford
as code owners
compulim
approved these changes
May 22, 2025
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Changelog Entry
(no changelog entry for build change)
Description
This configures tsup to process CSS via
lightningcsspackage instead of theesbuildnative css processing.Design
The
ebuild's CSS processing is still kind of experimental and not as flexible as needed for production usage.The main concern is that it doesn't allow configuring generated class names prefix. When minified, ESbuild will use the shortest possible name for any class in the bundle. This becomes a problem when there are two different bundles build by ESbuild on the same page as their classes collide.
On the other hand LightningCSS is a tool developed to build and bundle CSS, so it is more flexible and it covers our use-cases well.
We use the package via
unplugin-lightningcsswhich is a rather simple universal bundler plugin. Given I've already contributed a fix back to the package for the proper CSS modules support, and the code of the plugin is rather simple, I don't see any risks for long term maintenance of such approach.Specific Changes
-
CHANGELOG.mdI have updated documentationReview Checklist
z-index)package.jsonandpackage-lock.jsonreviewed